/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    useTheme,
    Button,
    useToast,
    LayerLoading,
    Text,
    Navbar,
    Toolbar,
    IconButton,
    IconArrowLeft,
    MenuList,
    MenuItem,
    IconMoreVertical
} from "customize-easy-ui-component";

import { InternalItemHandResult, OriginalViewProps, ReportViewProps } from "./comp/base";
import {Spinner} from "../../UiDebugSave/sample/Spinner";



interface ReportStarterProps {
    id: string;
    source: any;
    template: React.ReactElement<React.ForwardRefRenderFunction<InternalItemHandResult,ReportViewProps>>;
}
/** 正式报告：
 * 报告全屏幕显示的、打印！，原始记录也可能嵌入到左边的列表框框位置的用来点击每一条小小项目查看：
 * */
export const ReportStarter: React.FunctionComponent<ReportStarterProps> = ({
                                                                               id,
                                                                               source,
                                                                               template,
                                                                               ...other
                                                                           }) => {
    //初始化不可以直接取React.useState(source || {})，不然路由器切换就变成旧source。新修改被抛弃了。
    // const {storage, } =React.useContext(EditStorageContext);
    //console.log("ReportStarter捕获,切花source=", source,"新storage=",storage);
    if (!id) {
        return null;
    }

    //无法把<EditStorageContext.Provider value={{storage,setStorage}}>放这附近能产生效果，必须提升到顶级路由组件内去做。
    return (
        <React.Fragment>
            {
                //useMemo使用后：各分区项目子组件inp各自独立的，分区项目子组件内若使用setInp(null) 清空重置后，无法靠重新拉取后端数据来保证恢复显示。
                //项目子组件使用setInp(null) 重置后，若上级组件重新取后端数据没变化的，也必须再次路由后再进入才可以让各分区项目子组件render恢复显示数据。
                React.cloneElement(template as React.ReactElement<any>, {
                    source,
                    repId: id,
                })
            }
        </React.Fragment>
    );
}

